<template>
	<view class="content">
		<Nav></Nav>
		<Tab class="myTab"></Tab>
		<myMap :marker="marker" :latitude="latitude" :longitude="longitude" :scale="scale" :bottomData="bottomData"
			@markertap="markertap" @callouttap="callouttap"></myMap>
	</view>
</template>
<script setup>
import { ref, reactive, computed } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import Nav from './components/nav/Nav.vue';
import myMap from './components/map/Map.vue';
import MapData from './data/map.json';
import QQMapWX from '../../utils/qqmap-wx-jssdk'

const latitude = ref(39.959661)  //纬度
const longitude = ref(116.298828);//经度
const scale = ref(13);//缩放级别
const bottomData = ref(false);
const marker = reactive(MapData);

onShow(() => {
	uni.getLocation({
		geocode: true,
		type: 'wgs84',
		success: (res) => {
			console.log(res, '获取当前位置')
			longitude.value = res.longitude
			latitude.value = res.latitude

		},
		address: (res) => {
			console.log('address', res)
		}
	})
	var qqmapsdk;
	// 实例化API核心类
	qqmapsdk = new QQMapWX({
		key: '65QBZ-3BHR4-AMHUL-FWFDY-YW3VF-TLFVI'
	});
	qqmapsdk.reverseGeocoder({
		location: {
			latitude: latitude.value,
			longitude: longitude.value
		},
		success: (res) => {
			console.log('reverseGeocoder', res)
		},
		fail: (err) => {
			console.log('reverseGeocoder', err)
		}
	})
});

//地图点击事件
const markertap = (e) => {
	console.log("===你点击了标记点===", e)
};
//地图点击事件
const callouttap = (e) => {
	console.log('地图点击事件', e)
};

</script>
  
<style scoped lang="scss">
.content {
	width: 100vw;
	height: 100vh;
	overflow: scroll;
	display: flex;
	flex-direction: column;

}
</style>